<template>
  <div>
    <li>
      <label>
        <input type="checkbox"
               :checked="listItem.done"
               @change="itemChange(listItem)" />
        <span v-show="!listItem.isEdit">{{listItem.hobby}}</span>
        <input v-show="listItem.isEdit"
               type="text"
               ref="inputText"
               :value="listItem.hobby"
               v-on:blur="blurEdit(listItem,$event)">
      </label>
      <button class="btn btn-danger"
              @click="deleteItem(listItem.id)">删除</button>
      <button class="btn btn-primary"
              v-show="!listItem.isEdit"
              @click="editItem(listItem)">编辑</button>
    </li>
  </div>
</template>

<script>
export default {
  data () {
    return {
      itemList: []
    }
  },
  props: ['listItem'],
  methods: {
    // 获取数据
    getList (itemList) {
      // console.log(itemList, typeof (itemList));
      this.itemList = itemList
    },
    // item全选或反选
    itemChange (item) {
      this.$bus.$emit("itemChange", item);
    },
    // 删除选项
    deleteItem (id) {
      if (confirm("你确定删除吗？")) {
        this.$bus.$emit("deleteItem", id)
      }
    },
    // 编辑选项
    editItem (listItem) {
      if (listItem.hasOwnProperty('isEdit')) {
        console.log("isEdit已经存在");
        listItem.isEdit = true
      } else {
        // listItem.isEdit = true
        // 用上面的直接添加isEdit属性,对象没法监测到发生变化，必须要用this.$set()方法
        this.$set(listItem, 'isEdit', true);
        // console.log(listItem);
      }
      // input框自定获取焦点
      // 直接这样写并没有获得自动获取焦点功能
      // this.$refs.inputText.focus()
      this.$nextTick(function () {
        this.$refs.inputText.focus()
      })
    },
    // input框失去焦点，真正触发编辑
    blurEdit (listItem, e) {
      // this.$set(listItem, 'isEdit', false)
      // 因为上面编辑的过程中isEdit一定是存在的的，所以不用使用上面的方法，可以直接使用下面的方法
      listItem.isEdit = false
      if (!e.target.value.trim()) return alert("输入的内容不能为空")
      this.$bus.$emit("editItem", listItem, e.target.value);
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    // this.getList代表函数getList，this.getList()代表调用函数
    this.$bus.$on('sendList', this.getList)
  }
}
</script>
<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}
li:hover button {
  display: block;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>